<template>
	<view>
		<scroll-view class=" mx-4 border align-center" style="background-color:#000000;padding-bottom:20rpx;width: 100%; white-space: nowrap" scroll-x="true" >
		<view :style="'width: '+(10*670)+'rpx;'">
		<view style="display: inline-block;margin-left: 20rpx;position: relative;color:#AA41E6" v-for="item in 10">
			<view style="height: 20rpx;"></view>
			<image class="nianka-image" style="width: 650rpx;height: 300rpx;margin-left: 50%;transform: translateX(-50%);" mode="scaleToFill" src="../../static/vip_back_1.png"></image>
			<view style="
				background-color: #FFFFFF;
				display: inline-block;
				position: absolute;
				left: 20rpx;
				border-radius: 20rpx;
				font-size: 26rpx;
				padding: 10rpx;
				font-weight: bold;
				top:40rpx">美&nbsp;容&nbsp;会&nbsp;员</view>
				
				<text style="
					font-size: 45rpx;
					color: #FFFFFF;
					position: absolute;
					top:35rpx;
					filter: grayscale(100%);
					left: 180rpx;">年&nbsp;卡</text>
					
				<text v-show="false" style="
					font-size: 40rpx;
					color: #FFFFFF;
					position: absolute;
					bottom:15rpx;
					left: 50rpx;">主&nbsp;卡</text>
				
				<view style="
					position: absolute;
					bottom: 20rpx;
					right: 200rpx;
					border-radius: 100rpx;
					padding: 10rpx 20rpx 10rpx 20rpx;
					display: inline-block;
					background-color: #FFFFFF;
					position: absolute;">
					赠&nbsp;送
				</view>
				
				<view style="
					position: absolute;
					bottom: 20rpx;
					right: 60rpx;
					border-radius: 100rpx;
					padding: 10rpx 20rpx 10rpx 20rpx;
					display: inline-block;
					background-color: #FFFFFF;
					position: absolute;">
					激&nbsp;活
				</view>
				<image 
					src="../../static/vip_logo.png" 
					style="
						filter: invert(100%);
						position: absolute;
						width: 60rpx;
						top:50rpx;
						right: 100rpx;
						" 
					mode="widthFix"></image>
		</view>
		</view>
		</scroll-view>
		<view style="color: #FFFFFF;height: 40rpx;position: relative;background-color: #000000;padding-bottom: 20rpx;">
			<text style="position: absolute;right: 20rpx;" @click="toNavPage('../kabao/kabao')">前往卡包</text>
		</view>
		<view style="height: 30rpx;"></view>
		<view>
			<view style="padding-left: 20rpx;font-weight: bold;">所有会员卡</view>
		<scroll-view class=" mx-4 border align-center" style="padding-bottom:20rpx;width: 100%; white-space: nowrap" scroll-x="true" >
			<view :style="'width: '+(10*550)+'rpx;'">
			<view>
				<view style="display: inline-block;margin-left: 20rpx;position: relative;color:#AA41E6" v-for="item in 10">
					<view style="height: 20rpx;"></view>
					<image class="nianka-image" style="width: 530rpx;height: 200rpx;margin-left: 50%;transform: translateX(-50%);" mode="scaleToFill" src="../../static/vip_back_1.png"></image>

						<text style="
						
							font-size: 45rpx;
							color: #FFFFFF;
							position: absolute;
							top:35rpx;
							filter: grayscale(100%);
							left: 30rpx;">美容卡</text>
							
						<text v-show="false" style="
							font-size: 40rpx;
							color: #FFFFFF;
							position: absolute;
							bottom:15rpx;
							left: 50rpx;">主卡</text>
						
						<view style="
							position: absolute;
							bottom: 20rpx;
							left: 40rpx;
							font-size: 20rpx;
							border-radius: 100rpx;
							padding: 10rpx 20rpx 10rpx 20rpx;
							display: inline-block;
							background-color: #FFFFFF;
							position: absolute;">
							购&nbsp;买
						</view>
						
						<image 
							src="../../static/vip_logo.png" 
							style="
								filter: invert(100%);
								position: absolute;
								width: 60rpx;
								top:50rpx;
								right: 20rpx;
								" 
							mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		</scroll-view>
		
		<view style="height: 30rpx;"></view>
		<view>
			<view style="font-weight: bold;text-align: center;">使用说明</view>
			<view style="height: 20rpx;"></view>
			<view style="text-align: center;color: gray;">1、使用规则，使用规则使用水水萨</view>
			<view style="height: 20rpx;"></view>
			<view style="text-align: center;color: gray;">1、使用规则，使用规则使用水水萨</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toNavPage(path){
				if(path==null||(path+"").length<5){
					that.$refs.uToast.show({
						title: "暂时未开启",
						type: 'warning',
						duration: '2300'
					});
					return;					
				}
				uni.navigateTo({
					url:path
				})
			}
		}
	}
</script>

<style>

</style>
